<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="ie=edge" http-equiv="x-ua-compatible"/>
    <title>登录|注册 - 家居网购</title>
    <meta
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
            name="viewport"
    />
    <link href="../../assets/css/vendor/vendor.min.css" rel="stylesheet"/>
    <link href="../../assets/css/plugins/plugins.min.css" rel="stylesheet"/>
    <link href="../../assets/css/style.min.css" rel="stylesheet"/>
    <!--    引入jquery-->
    <script
            src="../../script/jquery-3.6.0.min.js"
            type="text/javascript"
    ></script>
    <script type="text/javascript">
        $(function () {//页面加载完毕1后执行function
            //绑定点击事件
            $("#sub-btn").click(function (){
                //获取到输入的用户名=>看前端给的页面
                var usernameVal = $("#username").val();
                // alert("ulsernameVal=" + usernameVal)

                //编写正则表达式来进行验证
                //\w：匹配单个数字、大小写字母字符
                var usernamePattern = /^\w{6,10}$/;
                //验证
                if(!usernamePattern.test(usernameVal)) {
                    //展示错误提示，jquery的属性过滤器
                    $("span[class='errorMsg']").text("用户名格式不对，需要6-10个字符");
                    return false;//不提交
                }

                //完成对密码的校验
                var passwordVal = $("#password").val();
                var passwordPattern = /^\w{6,10}$/;
                if(!passwordPattern.test(passwordVal)) {
                    //展示密码错误的提示，基本过滤器
                    $("span.errorMsg").text("密码格式不对，需要6-10个字符");
                    return false;//不提交
                }

                //两次密码相同
                //得到第二次输入密码
                var repwdVal = $("#repwd").val();
                if(repwdVal != passwordVal) {
                    $("span.errorMsg").text("输入的两次密码不相同");
                    return false;
                }

                //验证邮箱
                //得到邮箱=>html
                var emailVal = $("#email").val();
                //注意：在java中，正则表达式的转义是\\，在js正则表达式转义是\
                var emailPattern = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/ ;
                if(!emailPattern.test(emailVal)) {
                    $("span.errorMsg").text("电子邮件格式不对");
                    return false;
                }

                //到此全部过关 => 暂时不提交，显示验证通过信息
                $("span.errorMsg").text("验证通过...");
                return false;
            })
        })
    </script>
</head>

<body>
<!-- Header Area start  -->
<div class="header section">
    <!-- Header Top Message Start -->
    <!-- Header Top  End -->
    <!-- Header Bottom  Start -->
    <div class="header-bottom d-none d-lg-block">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a
                                href="../../index.html"
                                style="font-size: 24px; font-weight: bold; color: #333"
                        >家居网购</a
                        >
                    </div>
                </div>
                <!-- Header Logo End -->
            </div>
        </div>
    </div>
    <!-- Header Bottom  Start 手机端的header -->
    <div class="header-bottom d-lg-none sticky-nav bg-white">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a
                                href="../../index.html"
                                style="font-size: 24px; font-weight: bold; color: #333"
                        >家居网购</a
                        >
                    </div>
                </div>
                <!-- Header Logo End -->
            </div>
        </div>
    </div>
    <!-- Main Menu Start -->
    <div style="width: 100%; height: 50px; background-color: black"></div>
    <!-- Main Menu End -->
</div>
<!-- Header Area End  -->
<!-- login area start -->
<div class="login-register-area pt-70px pb-100px">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-12 ml-auto mr-auto">
                <div class="login-register-wrapper">
                    <div class="login-register-tab-list nav">
                        <a class="active" data-bs-toggle="tab" href="#lg1">
                            <h4>会员登录</h4>
                        </a>
                        <a data-bs-toggle="tab" href="#lg2">
                            <h4>会员注册</h4>
                        </a>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane active" id="lg1">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <form action="#" method="post">
                                        <input
                                                name="user-name"
                                                placeholder="Username"
                                                type="text"
                                        />
                                        <input
                                                name="user-password"
                                                placeholder="Password"
                                                type="password"
                                        />
                                        <div class="button-box">
                                            <div class="login-toggle-btn">
                                                <input type="checkbox"/>
                                                <a class="flote-none" href="javascript:void(0)"
                                                >Remember me</a
                                                >
                                                <a href="#">Forgot Password?</a>
                                            </div>
                                            <button type="submit"><span>Login</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="lg2">
                            <div class="login-form-container">
                                <div class="login-register-form">
<!--                     提示信息-->
                      <span
                              class="errorMsg"
                              style="
                          float: right;
                          font-weight: bold;
                          font-size: 20pt;
                          margin-left: 10px;
                        "
                      ></span>
                                    <form action="#" method="post">
                                        <input
                                                id="username"
                                                name="user-name"
                                                placeholder="Username"
                                                type="text"
                                        />
                                        <input
                                                id="password"
                                                name="user-password"
                                                placeholder="输入密码"
                                                type="password"
                                        />
                                        <input
                                                id="repwd"
                                                name="user-password"
                                                placeholder="确认密码"
                                                type="password"
                                        />
                                        <input
                                                id="email"
                                                name="user-email"
                                                placeholder="电子邮件"
                                                type="email"
                                        />
                                        <input
                                                id="code"
                                                id="code"
                                                name="user-name"
                                                placeholder="验证码"
                                                style="width: 50%"
                                                type="text"
                                        />　　<img
                                            alt=""
                                            src="../../assets/images/code/code.bmp"
                                    />
                                        <div class="button-box">
                                            <button id="sub-btn" type="submit">
                                                <span>会员注册</span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- login area end -->

<!-- Footer Area Start -->
<div class="footer-area">
    <div class="footer-container">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <!-- Start single blog -->
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div
                            class="col-md-6 col-sm-6 col-lg-3 mb-md-30px mb-lm-30px"
                            data-aos="fade-up"
                            data-aos-delay="400"
                    >
                        <div class="single-wedge">
                            <h4 class="footer-herading">信息</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li">
                                            <a class="single-link" href="about.html">关于我们</a>
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="#">交货信息</a>
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="privacy-policy.html"
                                            >隐私与政策</a
                                            >
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="#">条款和条件</a>
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="#">制造</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div
                            class="col-md-6 col-lg-2 col-sm-6 mb-lm-30px"
                            data-aos="fade-up"
                            data-aos-delay="600"
                    >
                        <div class="single-wedge">
                            <h4 class="footer-herading">我的账号</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li">
                                            <a class="single-link" href="my-account.html"
                                            >我的账号</a
                                            >
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="cart.html">我的购物车</a>
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="login.html">登录</a>
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="wishlist.html"
                                            >感兴趣的</a
                                            >
                                        </li>
                                        <li class="li">
                                            <a class="single-link" href="checkout.html">结账</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div
                            class="col-md-6 col-lg-3"
                            data-aos="fade-up"
                            data-aos-delay="800"
                    ></div>
                    <!-- End single blog -->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row flex-sm-row-reverse">
                    <div class="col-md-6 text-right">
                        <div class="payment-link">
                            <img alt="" src="#"/>
                        </div>
                    </div>
                    <div class="col-md-6 text-left"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer Area End -->
<script src="../../assets/js/vendor/vendor.min.js"></script>
<script src="../../assets/js/plugins/plugins.min.js"></script>
<!-- Main Js -->
<script src="../../assets/js/main.js"></script>
<script>
    window.onload = function () {
        // 替换 logo
        var logo = document.querySelector(".header-logo a");
        if (logo) {
            logo.innerHTML = "家居网购";
            logo.href = "../../index.html"; // 确保链接正确
        }

        // 查找并删除版权信息
        var footer = document.querySelector(".footer-bottom .text-left");
        if (footer && footer.textContent.includes("Copyright")) {
            footer.innerHTML = "";
        }
    };
</script>
</body>
</html>
